<template>
  <el-dialog
    v-el-drag-dialog
    title="变更历史"
    :visible.sync="isShow"
    width="1000px"
    @closed="reset"
  >
    <el-table-form ref="form" :model="query">
      <el-form-item label="日期">
        <el-date-picker
          v-model="query.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          unlink-panels
        />
      </el-form-item>

      <template v-slot:btns>
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </template>
    </el-table-form>
    <lb-table
      ref="lbTable"
      border
      element-loading-text="加载中"
      :column="column"
      :data="tableData.data"
      pagination
      :page-size="10"
      :total="tableData.total"
      custom-column
      :immediate-fetch="false"
      @fetch="fetchData"
    />
  </el-dialog>
</template>

<script>
  import { fillingcheckHistoryList } from '@/api'
  import dayjs from 'dayjs'
  export default {
    data() {
      return {
        isShow: false,
        tableData: {
          data: [],
          total: 0
        },
        query: {
          date: []
        }
      }
    },
    computed: {
      column() {
        return [
          {
            label: '时间',
            prop: 'happendDt',
            width: 150,
            align: 'center',
            render: (h, { row }) => (
            <span>
              {row.happendDt && dayjs(row.happendDt).format('YYYY-MM-DD hh:ss')}
            </span>
          )
          },
          {
            label: '操作员',
            prop: 'createUser',
            width: 150,
            align: 'center'
          },
          {
            label: '变更内容',
            prop: 'changeInfo',
            align: 'left'
          }
        ]
      }
    },
    methods: {
      show() {
        this.isShow = true
        this.$nextTick(() => {
          this.$refs.lbTable.fetch({ currentPage: 1 })
        })
      },
      reset() {
        this.isShow = false
      },
      search() {
        this.$refs.lbTable.fetch({ currentPage: 1 })
      },
      async fetchData({ currentPage, pageSize }) {
        const query = {
          currentPage,
          pageSize
        }
        if (this.query.date.length) {
          query['startTime'] = this.query.date[0]
          query['endTime'] = this.query.date[1]
        }
        const res = await fillingcheckHistoryList(query)
        this.tableData.data = res.data.rows
        if (currentPage === 1) this.tableData.total = res.data.total
      }
    }
  }
</script>

<style lang="scss" scoped></style>
